<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>充值卡支付 - 元易</title>
<link href="${rc.contextPath}/css/css.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="${rc.contextPath}/js/jquery-1.4.4.min.js" charset="UTF-8"></script>
<!--<script type="text/javascript" src="${rc.contextPath}/js/jquery.form.js" charset="UTF-8"></script>-->
<style type="text/css">
.overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100%;
	_padding: 0 20px 0 0;
	background: #f6f4f5;
	display: none;
}

.showbox {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 9999;
	opacity: 0;
	filter: alpha(opacity =             0);
	margin-left: -80px;
}

* html,* html body {
	background-image: url(about:blank);
	background-attachment: fixed;
}

* html .showbox,* html .overlay {
	position: absolute;
	top: expression(eval(document.documentElement.scrollTop) );
}

#AjaxLoading {
	border: 1px solid #8CBEDA;
	color: #37a;
	font-size: 12px;
	font-weight: bold;
}

#AjaxLoading div.loadingWord {
	width: 220px;
	height: 50px;
	line-height: 50px;
	border: 2px solid #D6E7F2;
	background: #fff;
}

#AjaxLoading img {
	margin: 10px 15px;
	float: left;
	display: inline;
}
</style>
<script type="text/javascript">
    function rand(randCodeId){
	    document.getElementById(randCodeId).src = document.getElementById(randCodeId).src+'?'+(new Date()).getTime();
    }

function isNull(s){
    if (s == null || s.length <= 0 || trim(s) == ""){
            return true;
    }
    return false;
}

function trim(strSrc)
{
	return strSrc.replace(/(^\s*)|(\s*$)/g, "");
}

function checkCommonPay()
{
	 var cardNo=$("#cardNo").val();
     var cardPwd=$("#cardPwd").val();
     if(isNull(cardNo))
     {
     	$("#cardNo").focus();
         return false;
     }
     if(isNull(cardPwd))
     {
     	$("#cardPwd").focus();
         return false;
     }
     if(isNull($("#randCode").val()))
     {
     	$("#randCode").focus();
         return false;
     }
     var selectAmount=$('input:radio:checked').val();
     if(isNull(selectAmount)||selectAmount<1)
     {
    	 $("#exception").html("请正确选择充值卡面额.");
    	 setTimeout( function(){ $("#exception").html("");}, ( 2000 ) ); 
         return false;
     }
     	var h = $(document).height();
	    $(".overlay").css({"height": h });	
		$(".overlay").css({'display':'block','opacity':'0.8'});
		$(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
		$.ajax({
  		  type: "POST",
  		  url: "${rc.contextPath}/card.htm",
  		  cache: false,
  		  data: "cardNo="+cardNo+"&cardPwd="+cardPwd+"&randCode="+$("#randCode").val()+"&selectAmount="+selectAmount+"&requestId="+$("#requestId").val()+"&bossType="+$("#bossType").val(),
  		  dataType: "txt",
  		  success: function(msg) {
  			  $("#exception").html("");
  			  var result=msg.split(";");
  			  if(result[0]!="200")
  			  {
  				$("#exception").html(result[0]);
  				$(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
  				$(".overlay").css({'display':'none','opacity':'0'});
  				rand("randCode1");
  				//  setTimeout( function(){ $("#exception").html("");}, ( 2000 ) ); 
  			  }
  			  else
  			  {
  	  			  //查询订单状态 调整商户凭证页面
  	  			   $("#seqId").val(result[1]);
  	  			   setTimeout("checkOrderStatus();",8000);
  			  }
  		   },
  		  error: function(err) {
  		  alert("系统忙,稍候再试...");
  		  }
  		  });

    return false;
}

function checkCommonBlaPay()
{
	 var cardNo=$("#cardNoBla").val();
     var cardPwd=$("#cardPwdBla").val();
     var orderAmount=$("#orderAmount").val();
     var blaAmount=$("#blaAmount").val();
     if(isNull(cardNo))
     {
     	$("#cardNoBla").focus();
         return false;
     }
     if(isNull(cardPwd))
     {
     	$("#cardPwdBla").focus();
         return false;
     }
     if(isNull($("#randCodeBla").val()))
     {
     	$("#randCodeBla").focus();
         return false;
     }
     orderAmount=orderAmount.replace(",","");
     blaAmount=blaAmount.replace(",","");
     if(orderAmount/100>blaAmount)
     {
    	 $("#exceptionBla").html("对不起,余额不足");
         return false;
     }
     	var h = $(document).height();
	    $(".overlay").css({"height": h });	
		$(".overlay").css({'display':'block','opacity':'0.8'});
		$(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
		$.ajax({
  		  type: "POST",
  		  url: "${rc.contextPath}/cardBla.htm",
  		  cache: false,
  		  data: "cardNo="+cardNo+"&cardPwd="+cardPwd+"&randCode="+$("#randCodeBla").val()+"&requestId="+$("#requestId").val(),
  		  dataType: "txt",
  		  success: function(msg) {
  			  $("#exceptionBla").html("");
  			  var result=msg.split(";");
  			  if(result[0]!="200")
  			  {
  				$("#exceptionBla").html(result[0]);
  				$(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
  				$(".overlay").css({'display':'none','opacity':'0'});
  				rand("randCodeRom");
  				//  setTimeout( function(){ $("#exception").html("");}, ( 2000 ) ); 
  			  }
  			  else
  			  {
  	  			  //查询订单状态 调整商户凭证页面
  				 window.location="${rc.contextPath}/index.jsp";
  			  }
  		   },
  		  error: function(err) {
  		  alert("系统忙,稍候再试...");
  		  }
  		  });

    return false;
}

function checkOrderStatus()
{
	$.ajax({
		  type: "GET",
		  url: "${rc.contextPath}/card.htm?method=queryStatus",
		  cache: false,
		  data:"seqId="+$("#seqId").val(),
		  dataType: "txt",
		  success: function(msg) {
			   // $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
  			   //$(".overlay").css({'display':'none','opacity':'0'});
  			   if(!isNull(msg))
  			   {
  				 window.location=msg;
  			   }
		   },
		  error: function(err) {
		  //调整到错误页面
		  //alert("系统忙,稍候再试...");
		  window.location="${rc.contextPath}/index.jsp";
		  $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
		  $(".overlay").css({'display':'none','opacity':'0'});
		  }
		  });
    setTimeout("checkOrderStatus()",8000);
}

function getMemberAmountList(){
        var cardNo=$("#cardNo").val();
        var cardPwd=$("#cardPwd").val();
        if(isNull(cardNo))
        {
        	$("#cardNo").focus();
            return false;
        }
        if(isNull(cardPwd))
        {
        	$("#cardPwd").focus();
            return false;
        }
    	$.ajax({
    		  type: "GET",
    		  url: "${rc.contextPath}/card.htm?method=check&cardNo="+cardNo+"&cardPwd="+cardPwd+"&orderAmount="+$("#orderAmount").val(),
    		  cache: false,
    		  dataType: "txt",
    		  success: function(msg) {
    			  $("#exception").html("");
    			  var result=msg.split("@");
    			  if(result[0]!="200")
    			  {
    				  $("#exception").html(result[1]);
    				  $("#cardPwd").val("");
    				   $("#cardPwdShow").html("");
    				  //$("#cardPwd").focus();
    				//  setTimeout( function(){ $("#exception").html("");}, ( 2000 ) ); 
    			  }
    			  else
    			  {
    				  $("#bossType").val(result[1]);
    				  $("#cardType").val(result[2]);
    				  $("#cardRegion").val(result[3]);
    				  $("#amountListShow").html(result[4]);
    			  }
    		   },
    		  error: function(err) {
    		  alert("系统忙,稍候再试...");
    		  }
    		  });
    			        
    }

function getCardBla(){
	   $("#exceptionBla").html("");
        var cardNo=$("#cardNoBla").val();
        var cardPwd=$("#cardPwdBla").val();
        if(isNull(cardNo))
        {
        	$("#cardNoBla").focus();
            return false;
        }
        if(isNull(cardPwd))
        {
        	$("#cardPwdBla").focus();
            return false;
        }
    	$.ajax({
    		  type: "GET",
    		  url: "${rc.contextPath}/cardBla.htm?method=query&cardNo="+cardNo+"&cardPwd="+cardPwd,
    		  cache: false,
    		  dataType: "txt",
    		  success: function(msg) {
    			  var result=msg.split("@");
    			  if(result[0]!="200")
    			  {
    				  $("#exceptionBla").html("此卡不存在余额");
    				  $("#cardPwdBla").val("");
    				  //$("#cardPwd").focus();
    				//  setTimeout( function(){ $("#exception").html("");}, ( 2000 ) ); 
    			  }
    			  else
    			  {
    				  $("#balane").html(result[1]);
    				  $("#blaAmount").val(result[1]);
    			  }
    		   },
    		  error: function(err) {
    		  alert("系统忙,稍候再试...");
    		  }
    		  });
    			        
    }
    
function tab(tab)
{
	if(tab==1)
	{
		document.getElementById("cardtab1").style.display="";
		document.getElementById("cardtab2").style.display="none";
		document.getElementById("cardPay").className="payNow";
		document.getElementById("cardbanPay").className="";
	}else
	{
		document.getElementById("cardtab2").style.display="";
		document.getElementById("cardtab1").style.display="none";
		document.getElementById("cardbanPay").className="payNow";
		document.getElementById("cardPay").className="";
	}
}

$("document").ready(function(){  
          $("#cardPwd").keyup(  
               function(){
               $("#cardPwdShow").html(splitCardCode(this.value));
               })          
          });

$("document").ready(function(){  
          $("#cardNo").keyup(  
               function(){
               $("#cardPwdShow").html(splitCardCode(this.value));
               })          
          });
          
function splitCardCode(s) {
	var sb = [];
	s = trimAll(s);
	array = new Array(3,7,11,15,19);
	for(i = 0; i< s.length; i++) {
		sb.push(s.charAt(i));
		for(j = 0; j < array.length; j++) {
			if (array[j] == i) {
				sb.push(" ");
			}
		}
	}
	return sb.join("");
}
/*
去除所有空格
*/
function trimAll(s) {
	re = /\s+/gi;
	s = s.replace(re,"");
	return s
}
          
</script>
</head>

<body>
<div id="wrapper">
<div class="head">
<div class="headL"><img src="${rc.contextPath}/images/logo.jpg" /></div>
<div class="headR"><a href="#">客服中心</a> &nbsp;&nbsp;| &nbsp;&nbsp;<a
	href="query.htm">交易查询</a>&nbsp;&nbsp;| &nbsp;&nbsp;<a href="#">支付帮助</a>&nbsp;&nbsp;
</div>
</div>

<div class="step"><img src="${rc.contextPath}/images/step1.jpg" /></div>

<div class="order">
<div class="orderL">
<dl>
	<dt>商品名称：</dt>
	<dd>${request.productName!}</dd>
</dl>
<dl>
	<dt>支付金额：</dt>
	<dd><span class="money">${request.orderAmount/100!}.00</span>元</dd>
</dl>
</div>
<div class="orderR">
<dl>
	<dt>商家名称：</dt>
	<dd>${request.memberName!}</dd>
</dl>
<dl>
	<dt>订单号：</dt>
	<dd>${request.orderId!}</dd>
</dl>
<dl>
	<dt>订单时间：</dt>
	<dd>${request.orderTime!}</dd>
</dl>
</div>
</div>

<div class="pay">
<div class="payT">
<ul>
	<li><a href="#" id="cardPay" class="payNow" onclick="tab(1);">充值卡支付</a></li>
	<li><a href="#" id="cardbanPay" onclick="tab(2);">余额卡支付</a></li>
</ul>
</div>
<div class="clear"></div>

<div id="cardtab1">
<form action="${rc.contextPath}/card.htm" method="post"
	onsubmit="return checkCommonPay(this);" id="cardPay" name="cardPay">
<input id="requestId" name="requestId" type="hidden" value="${request.requestId!}" /> 
<input id="bossType" name="bossType" type="hidden" value="${request.bossType!}" /> 
<input name="cardType" type="hidden" value="${request.cardType!}" />
<input name="cardRegion" type="hidden" value="${request.cardRegion!}" />
<input id="seqId" name="seqId" type="hidden"/>
<input id="orderAmount" name="orderAmount" type="hidden" value="${request.orderAmount!}"/>
<div class="input">
<ul>
	<li>支持的卡种:</li>
	${request.suBossName!}
</ul>
</div>

<div class="userInfo">
<ul>
	<li class="userInfoL">充值卡序列号：</li>
	<li class="userInfoR"><input name="cardNo" id="cardNo" type="text" placeholder="请正确输入卡号"
		class="width180px" maxlength="22" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
		class="exception" id="exception">${request.msgDesc!}</span></li>
</ul>
<ul>
	<li class="userInfoL">充值卡密码：</li>
	<li class="userInfoR"><input name="cardPwd" type="text" placeholder="请正确输入卡密"
		id="cardPwd" class="width180px" maxlength="22"
		onblur="return getMemberAmountList();" /><a href="#">核对密码</a><span id="cardPwdShow"
		class="num"></span></li>
</ul>
<ul>
	<li class="userInfoL">充值卡面额：</li>
	<li class="userInfoR listMoney"><span id="amountListShow">${request.amountList!}</span></li>
</ul>

<!--<ul>-->
<!--	<li class="userInfoL">手机号码：</li>-->
<!--	<li class="userInfoR"><input name="mobileNo" type="text" placeholder="请正确输入手机号,不是必填"-->
<!--		class="width180px" maxlength="11" /></li>-->
<!--</ul>-->

<ul>
	<li class="userInfoL">验证码：</li>
	<li class="userInfoR"><input type="text" tabindex="4" placeholder="请正确输入验证码"
		id="randCode" name="randCode" maxlength="4" class="width80px" /> <img
		id="randCodeRom" src="${rc.contextPath}/randCodevalidate.htm?date="
		+(new
		Date()).getTime() onclick="this.src=this.src+'?'+(new Date()).getTime()"
		style="vertical-align: top" alt="附加码点击自动刷新" /></li>
</ul>
<ul>
	<li class="userInfoL">&nbsp;</li>
	<li class="userInfoR"><input name="" type="submit" value="立即支付"
		class="payment" /></li>
</ul>
<div class="h10"></div>
</div>
<div class="line"></div>

<div class="note">
<ul>
	${request.pageHint!}
</ul>
</div>
</form>
</div>



<div id="cardtab2" style="display: none">
<form action="${rc.contextPath}/cardBla.htm" method="post"
	onsubmit="return checkCommonBlaPay(this);" id="balancePay"
	name="balancePay">
<div class="userInfo">
<ul>
	<li class="userInfoL">卡号：</li>
	<li class="userInfoR"><input name="cardNo"  id="cardNoBla" type="text" maxlength="22"
		class="width180px" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
		class="exception" id="exceptionBla">${request.msgDesc!}</span></li>
</ul>
<ul>
	<li class="userInfoL">卡密：</li>
	<li class="userInfoR"><input name="cardPwd" id="cardPwdBla" type="text" maxlength="22"
		onblur="return getCardBla();"
		class="width180px" /></li>
</ul>
<ul>
	<li class="userInfoL">余额：</li>
	<li class="userInfoR">
	<input id="blaAmount" name="blaAmount" type="hidden" value="0"/>
	<input id="orderAmount" name="orderAmount" type="hidden" value="${request.orderAmount!}"/>
	<span class="money" id="balane">0.00</span>元</li>
</ul>
<ul>
	<li class="userInfoL">验证码：</li>
	<li class="userInfoR"><input type="text" name="randCode" id="randCodeBla"
		maxlength="4" class="width80px" /><img id="randCode1"
		src="${rc.contextPath}/randCodevalidate.htm?date=" +(new
		Date()).getTime() onclick="this.src=this.src+'?'+(new Date()).getTime()"
		style="vertical-align: top" alt="附加码点击自动刷新" /></li>
</ul>
<ul>
	<li class="userInfoL">&nbsp;</li>
	<li class="userInfoR"><input name="" type="submit" value="立即支付"
		class="payment" /></li>
</ul>
<div class="h10"></div>
</div>
</form>
</div>

</div>
</div>

<!-- 弹出loading框 -->
<div class="overlay"></div>

<div id="AjaxLoading" class="showbox">
<div class="loadingWord"><img
	src="${rc.contextPath}/images/waiting.gif"/>订单处理中，请稍候...</div>
</div>

</body>
</html>
